<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.css}">
</head>

<body>
    <div type="button" class="btn-danger">烘箱使用看板</div>
    <div class="row no-gutters">
        <div class="col-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">烘箱使用日期查询：</span>
                </div>
                <input type="text" class="form-control" id="startDate" placeholder="请选择烘箱使用日期" onclick="WdatePicker({dateFmt:'yyyy-MM'})">
            </div>
        </div>
        <div class="col-3">
            <button type="button" class="btn btn-primary" onclick="btnSelect()">查询</button>
        </div>
    </div>
    <div id="main" style="width:100%;height: 600px;"></div>
    <script th:src="@{/bootstrap/js/jquery-3.6.1.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/bootstrap/js/popper.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{/js/My97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/js/jquery-dateformat.min.js}"></script>
    <script type="text/javascript">
    var chartDom = document.getElementById('main');

    var heatmapData = [];
    var lunarData = [];

    $(function() {
        //页面加载时显示当前年月
        var today = new Date();
        var formattedDate = $.format.date(today, 'yyyy-MM');
        $("#startDate").val(formattedDate);
        // echartsInit(sDate);
        // btnSelect();
    })

    function btnSelect() {
        var startDate = $("#startDate").val();
        if (startDate != "" && startDate != null && startDate != undefined) {
            echartsInit(startDate);
        } else {
            alert("查询的日期值不可为空");
        }
    }

    function getEchartsData(sDate) {
        $.ajax({
            type: 'GET',
            //生产环境前面要加二个点
            url: '../workflow/getBakeOvenInfoViewList?yearMontKsrq=' + sDate,
            dataType: 'json',
            async: false,
            success: function(result) {
                heatmapData = [];
                lunarData = [];
                for (var i = 0; i < result.length; i++) {
                    heatmapData.push([result[i].ksrq, Math.random() * 300]);
                    lunarData.push([result[i].ksrq, 1, result[i].strPJ]);
                }
            }
        });
    }

    function echartsInit(sDate) {
        var option;
        var myChart = echarts.init(chartDom);
        getEchartsData(sDate);
        //先解绑click事件
        myChart.off('click');
        option = {
            color: '#D9D9D9',
            // tooltip: {
            //   formatter: function (params) {
            //     return '测试要求: ' + params.value[1].toFixed(2);
            //   }
            // },
            visualMap: {
                show: false,
                min: 0,
                max: 300,
                calculable: true,
                seriesIndex: [2],
                orient: 'horizontal',
                left: 'center',
                bottom: 20,
                inRange: {
                    color: ['#e0ffff', '#006edd'],
                    opacity: 0.3
                },
                controller: {
                    inRange: {
                        opacity: 0.5
                    }
                }
            },
            calendar: [{
                left: 20,
                right: 20,
                top: 70,
                bottom: 20,
                //日历格子长度和宽度
                cellSize: ['auto', 90],
                yearLabel: { show: false },
                orient: 'vertical',
                dayLabel: {
                    show: true,
                    margin: 10,
                    firstDay: 1,
                    nameMap: 'ZH'
                },
                monthLabel: {
                    show: false
                },
                range: sDate
            }],
            series: [{
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    symbolSize: 0,
                    label: {
                        show: true,
                        position: 'insideTopRight',
                        formatter: function(params) {
                            var d = echarts.number.parseDate(params.value[0]);
                            return d.getDate();
                        },
                        fontSize: 15,
                        color: '#000000'
                    },
                    data: lunarData,
                    //silent: true
                },
                {
                    type: 'scatter',
                    coordinateSystem: 'calendar',
                    symbolSize: 0,
                    label: {
                        show: true,
                        //暂时先去除下面4个格式靠右下的设置，否则会出现人名超出格子外的情况
                        // position: 'insideRight',
                        // align: 'right',
                        // verticalAlign: 'middle',
                        // distance: 0,
                        formatter: function(params) {
                            let sResult = String(params.value[2]);
                            if (sResult != 'undefined' && sResult != 'null') {
                                let arrResult = sResult.split(",");
                                let vResult = '';
                                for (var i = 0; i < arrResult.length; i++) {
                                    innerarray = arrResult[i].split("^");
                                    //vResult += '<div><a href="http://192.102.2.204/workflow/request/ViewRequest.jsp?requestid=' + innerarray[2] + '">' + innerarray[0] + "~" + innerarray[1] + '</a></div><br>';
                                    vResult += innerarray[0] + innerarray[1] + '\n' + innerarray[3] + '\n';
                                }
                                // console.log("==>" + vResult + "<==");
                                return vResult;
                            } else {
                                return '';
                            }
                            // return '\n\n\n' + (params.value[2] || '');
                        },
                        fontSize: 14,
                        fontWeight: 700,
                        color: '#a00000'
                    },
                    renderLabelForTree: true,
                    renderMode: 'html',
                    data: lunarData,
                    // silent: true
                },
                {
                    name: '测试要求',
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: heatmapData
                }
            ]
        };
        myChart.setOption(option);
        //点击事件
        myChart.on('click', function(params) {
            //console.log(params);
            let sResult = '';
            sResult = String(params.value[2]);
            if (sResult != 'undefined' && sResult != 'null') {
                let arrResult = '';
                arrResult = sResult.split(",");
                let url = '';
                for (var i = 0; i < arrResult.length; i++) {
                    innerarray = arrResult[i].split("^");
                    url += 'http://192.102.2.204/workflow/request/ViewRequest.jsp?requestid=' + innerarray[2] + '~';
                }
                //因可能某天有多个数据，先进行拆分后再拼接网址
                let urlArray = '';
                urlArray = url.split('~');
                //console.log("=array=>" + urlArray + "<==");
                for (var j = 0; j < urlArray.length; j++) {
                    if (urlArray[j] != '') {
                        window.open(urlArray[j]);
                    }
                }
                // window.open(url);
            }
        });
    }
    </script>
</body>

</html>